﻿<template>
	<div class="stkreview-container">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form :model="queryParams" ref="queryForm" labelWidth="90">
				<el-row>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
						<el-form-item label="关键字">
							<el-input v-model="queryParams.searchKey" clearable="" placeholder="请输入模糊查询关键字" />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="16" :xl="20" class="mb10">
						<el-form-item>
							<el-button-group style="display: flex; align-items: center">
								<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'stkreview:page'"> 查询 </el-button>
								<el-button icon="ele-Refresh" @click="() => (queryParams = {})"> 重置 </el-button>
								<el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!showAdvanceQueryUI" style="margin-left: 5px"> 高级查询 </el-button>
								<el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI" style="margin-left: 5px"> 隐藏 </el-button>
								<el-button type="success" icon="ele-Document" @click="handleExport" style="margin-left: 5px"> 导出Excel </el-button>
							</el-button-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="料号名">
							<el-input v-model="queryParams.job_name" clearable="" placeholder="请输入料号名" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="审核状态">
							<el-select clearable="" v-model="queryParams.approve_state" placeholder="请选择审核状态:待审批/已批准/待修改">
								<el-option v-for="(item, index) in dl('StackupApproveState')" :key="index" :value="item.value" :label="`${item.value}`" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="审批备注">
							<el-input v-model="queryParams.approve_notes" clearable="" placeholder="请输入审批备注" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="MI制作">
							<el-input v-model="queryParams.mi_user" clearable="" placeholder="请输入MI制作" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="审核者">
							<el-input v-model="queryParams.approver" clearable="" placeholder="请输入审核者" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="提交时间">
							<el-date-picker
								type="daterange"
								v-model="queryParams.submit_timeRange"
								value-format="YYYY-MM-DD HH:mm:ss"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="制作者备注">
							<el-input v-model="queryParams.submit_notes" clearable="" placeholder="请输入制作者备注" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="审核时间">
							<el-date-picker
								type="daterange"
								v-model="queryParams.approve_timeRange"
								value-format="YYYY-MM-DD HH:mm:ss"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="料号创建时间">
							<el-date-picker
								type="daterange"
								v-model="queryParams.creation_dateRange"
								value-format="YYYY-MM-DD HH:mm:ss"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
						<el-form-item label="防呆检查结果">
							<el-input v-model="queryParams.check_notes" clearable="" placeholder="请输入防呆检查结果" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card class="full-table" shadow="hover" style="margin-top: 2px">
			<el-table
				:data="tableData"
				style="width: 100%"
				v-loading="loading"
				tooltip-effect="light"
				:tooltip-options="tooltipConfig"
				row-key="revision_id"
				@sort-change="sortChange"
				:row-class-name="tableRowClassName"
				border
			>
				<el-table-column type="index" label="序号" width="50" align="center" />
				<el-table-column prop="job_name" label="料号名" width="250" :show-overflow-tooltip="tooltipConfig">
					<template #default="scope">
						<el-link type="primary" :underline="false" @click="openEditStkreview(scope.row)">
							{{ scope.row.job_name }}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="approve_state" label="审核状态" :show-overflow-tooltip="tooltipConfig" />
				<el-table-column prop="approve_notes" label="审批备注" :show-overflow-tooltip="tooltipConfig" />
				<el-table-column prop="mi_user" label="MI制作" :show-overflow-tooltip="tooltipConfig" />
				<el-table-column prop="approver" label="审核者" :show-overflow-tooltip="tooltipConfig" />
				<el-table-column prop="submit_time" label="提交时间" :show-overflow-tooltip="tooltipConfig" />
				<el-table-column prop="submit_notes" label="制作者备注" :show-overflow-tooltip="tooltipConfig" />
				<el-table-column prop="approve_time" label="审核时间" :show-overflow-tooltip="tooltipConfig" />
				<!-- <el-table-column prop="creation_date" label="料号创建时间" :show-overflow-tooltip="tooltipConfig" /> -->
				<el-table-column prop="check_notes" label="防呆检查结果" :show-overflow-tooltip="tooltipConfig" />
				<el-table-column prop="stackup_image" label="叠构图" v-if="false" :show-overflow-tooltip="tooltipConfig" />
				<el-table-column label="操作" width="140" align="center" fixed="right" :show-overflow-tooltip="tooltipConfig" v-if="auth('stkreview:update') || auth('stkreview:delete')">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditStkreview(scope.row)" v-auth="'stkreview:update'"> 详细 </el-button>
						<el-button icon="ele-Delete" size="small" text type="danger" @click="delStkreview(scope.row)" v-auth="'stkreview:delete'"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-model:currentPage="tableParams.page"
				v-model:page-size="tableParams.pageSize"
				:total="tableParams.total"
				:page-sizes="[10, 20, 50, 100, 200, 500]"
				size="small"
				background=""
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
			/>
			<printDialog ref="printDialogRef" :title="printStkreviewTitle" @reloadTable="handleQuery" />
			<editDialog ref="editDialogRef" :title="editStkreviewTitle" @reloadTable="handleQuery" />
		</el-card>
	</div>
</template>

<script lang="ts" setup name="stkreview">
import { nextTick, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import printDialog from '/@/views/system/print/component/hiprint/preview.vue';
import editDialog from '/@/views/approve/stkreview/component/editDialog.vue';
import { pageStkreview, deleteStkreview } from '/@/api/approve/stkreview';
import { useUserInfo } from '/@/stores/userInfo';
import { vi } from 'element-plus/es/locale';
import { exportToExcel } from '/@/api/approve/stkreview';
import { ElLoading } from 'element-plus';
// 定义统一的tooltip配置
const tooltipConfig = {
	enterable: true,
	showAfter: 300,
	hideAfter: 200,
	effect: 'light',
	placement: 'top',
};

const showAdvanceQueryUI = ref(false);
const printDialogRef = ref();
const editDialogRef = ref();
const loading = ref(false);
const tableData = ref<any>([]);
const queryParams = ref<any>({});
const tableParams = ref({
	page: 1,
	pageSize: 100,
	field: 'submit_time',
	order: 'descending',
	descstr: 'descending',
	total: 0 as any,
});

// 获取用户信息的方法
const userStore = useUserInfo();
const getUserInfo = async () => {
	await userStore.setUserInfos();
	const userInfo = userStore.userInfos;
	console.log('用户名:', userInfo.realName);
	console.log('账号:', userInfo.account);
	console.log('角色:', userInfo.roles);
};

const printStkreviewTitle = ref('');
const editStkreviewTitle = ref('');

// 改变高级查询的控件显示状态
const changeAdvanceQueryUI = () => {
	showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
	console.log('showAdvanceQueryUI changed to:', showAdvanceQueryUI.value);
	// 强制触发重渲染
	nextTick(() => {
		console.log('After nextTick:', showAdvanceQueryUI.value);
	});
};
// 添加行类名判断函数
const tableRowClassName = ({ row }: any) => {
	if (row.approve_state === '待审批') {
		return 'pending-approval-row';
	} else if (row.approve_state === '待修改') {
		return 'pending-modification-row';
	}
	return '';
};
// 查询操作
const handleQuery = async () => {
	loading.value = true;
	var res = await pageStkreview(Object.assign(queryParams.value, tableParams.value));
	tableData.value = res.data.result?.items ?? [];
	tableParams.value.total = res.data.result?.total;
	loading.value = false;
};

// 列排序
const sortChange = async (column: any) => {
	tableParams.value.field = column.prop;
	tableParams.value.order = column.order;
	await handleQuery();
};

// 打开打印页面
const openPrintStkreview = async (row: any) => {
	printStkreviewTitle.value = '打印叠构审核';
};

// 打开编辑页面
const openEditStkreview = (row: any) => {
	if (!row || !row.revision_id) {
		ElMessage.error('无效的记录ID');
		return;
	}
	console.log('Opening edit dialog with row:', row);
	editStkreviewTitle.value = '叠构审核-' + row.job_name;
	row.approver = userStore.userInfos.realName;
	editDialogRef.value.openDialog(row);
};

export interface DeleteStkreviewInput {
	Id?: number;
	job_name?: string;
	appSource?: string;
}
// 删除
const delStkreview = (row: any) => {
	ElMessageBox.confirm(`${userStore.userInfos.realName}, 删除不可恢复,确定要删除吗?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			try {
				await deleteStkreview({
					job_name: row.job_name,
					appSource: '叠层审核',
				});
				handleQuery();
				ElMessage.success('删除成功');
			} catch (error: any) {
				console.error('删除失败:', error);
				ElMessage.error('删除失败: ' + (error.message || '未知错误'));
			}
		})
		.catch(() => {});
};

// 处理导出Excel
const handleExport = async () => {
	const loading = ElLoading.service({
		lock: true,
		text: '正在导出数据，请稍候...',
		background: 'rgba(0, 0, 0, 0.7)',
	});

	try {
		const response = await exportToExcel();
		const blob = new Blob([response.data], {
			type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
		});
		const downloadUrl = window.URL.createObjectURL(blob);
		const link = document.createElement('a');
		link.href = downloadUrl;
		link.download = `叠构审核数据_${new Date().getTime()}.xlsx`;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
		window.URL.revokeObjectURL(downloadUrl);

		ElMessage.success('导出成功！');
	} catch (error) {
		console.error('导出失败:', error);
		ElMessage.error('导出失败，请稍后重试');
	} finally {
		loading.close();
	}
};
// 改变页面容量
const handleSizeChange = (val: number) => {
	tableParams.value.pageSize = val;
	handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val: number) => {
	tableParams.value.page = val;
	handleQuery();
};

getUserInfo();
handleQuery();
</script>

<style scoped>
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}

:deep(.pending-approval-row) {
	background-color: #d4cda1; /* 浅橙色 */
}

:deep(.pending-modification-row) {
	background-color: #e4a6a6; /* 浅红色 */
}

/* 确保hover状态时颜色稍微深一点但保持相同色系 */
:deep(.pending-approval-row:hover) {
	background-color: #dfe08b !important;
}

:deep(.pending-modification-row:hover) {
	background-color: #e68b8b !important;
}
/* 调整表格行高和单元格大小 */
:deep(.el-table) {
	--el-table-row-height: 28px; /* 设置行高基准值 */
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell) {
	padding: 0 !important; /* 使用!important确保覆盖默认样式 */
	height: 27px !important; /* 强制设置高度 */
}

:deep(.el-table__cell .cell) {
	line-height: 25px !important; /* 行高与单元格高度一致 */
	padding-left: 5px;
	padding-right: 5px;
	height: 27px !important;
}

:deep(.el-table__header .cell) {
	height: 28px !important;
	line-height: 28px !important;
}

/* 确保表格内容垂直居中 */
:deep(.el-table .cell) {
	display: flex !important;
	align-items: center !important;
}

/* 特殊处理序号列和操作列 */
:deep(.el-table .cell.is-center) {
	justify-content: center !important;
}
</style>
